/* 
    01. vue 的最大特点：h5 和 数据(逻辑)分离，数据变化的时候，被拦截，h5 同步更新。
    数据驱动：没有dom操作， vue会根据数据自动渲染页面
    组件化：盒子（html+css+js）复用
    
    02. 使用 vue 的步骤：1. 引入; 2. 实例化 new Vue(); 3. h5
    03. 计算属性要点:
            why: 插值表达式逻辑太复杂，可读性差。
            how: 逻辑封装到函数里，函数名是 key，返回值是 value。
            使用：和状态一致
    04. vue2/vue3 的拦截的底层方法：Object.defineProperty Proxy
    05. vue2 的不足:
            1. 无法监听 es6 中 set 和 map 变化
            2. 无法监听 class 类型的数据
            3. 属性的新增或删除也无法监听
            4. 数组元素的增加和删除也无法监听
    06. vue 跟踪原理：
            状态变化时，被 get/set 拦截，watcher 通知组件开始渲染，
            虚拟 dom 通过 diff 算法对比，打补丁，生成新的 dom
    07. 基础指令及其指令简写
            指令：带有 v- 前缀的特殊属性
                v-show : 动态显示和隐藏
                v-if : 动态创建和删除
                v-for : 遍历
                v-bind : 动态绑定属性
                v-on:click : 绑定事件
                v-model : 双向数据绑定
            缩写：
                v-bind:src  ————>  :src    
                v-on:click  ————>  @click
    08. watch 要点
            对属性进行监听的函数。
            当属性变化的时候，函数触发。
            函数名就是属性名。
    09. 双向数据绑定的指令
            v-model 
    10. 解释双向数据绑定
            表单和状态。状态和表单同步更新
    11. vue2 无法监听新增的数据，解决方案：
            Vue.set();
    12. template 标签作用
            封装 h5
    13. 什么是虚拟 dom
            js 对象描述 dom 
    14. 为何要有虚拟 dom
            原生 dom 有几十属性，操作起来消耗性能。
    15. key 值作用
            diff 算法对比虚拟 dom 时，提高效率
    16. 事件处理传参语法
            无参：@click="add1"
            有参：@click="add2($event,1,2,3)"
    17. 四个事件修饰符及其作用
            stop prevent self once
    18. 按键修饰符作用
            keyup 在指定键触发
    19. 总结表单绑定知识点
            表单是用来前后的交互的，key - value 
                            value 
                文本框      字符串
                文本域      字符串
                checkbox    布尔值
                多选        数组
                单选        字符串
    20. 表单修饰符
            lazy number trim
*/